/* ui.js contains functions for building views for lexicon browsing/editing. */

function show(itemType, uid) {
	// called when user clicks a link to VIEW an item
	switch (itemType) {
		case "Node":
			var view = buildNodeView(uid);
			// TODO append view somewhere
			// TODO finally decide how to organize the ui
			// TODO showingItem(uid);
			break;
	}
}

function showingItem(uid) {
	// check whether item is cached
	var cached = getCached(uid);

	// if so, then load cached values into ui
	if (!!cached) {
		showItem(cached);
	} else {
		showItemRequesting(uid);
	}

	// request updates from server
	requestUpdates(uid, (!!cached) ? cached.modified : 0);
}

function showItem(dat) {
	// either called by showingItem with cached data
	//     or called by receiveUpdates if server sent an updated item
	// TODO load values into ui
	for (var key in dat) {
	}
	// TODO remove any overlay
}

function showItemRemoved(uid) {
	// called by receiveUpdates if server does not retain the item with uid
	// TODO look for uid in ui and show overlay "deleted"
}

function showItemRequesting(uid) {
	// called by showingItem if item with uid is not in local cache
	// TODO look for uid in ui and show overlay "loading..."
}

/* ********************************** */

function edit() {
	// called when user clicks a link to EDIT an item
	// TODO replace the browse view with an edit view
	// CONSIDER whether to ask server for updates if cached item is old
	// CONSIDER request latest data direct from server before editing
}

function save() {
	// called when user clicks SAVE from an edit view
	// TODO send updates to server, callback to receiveUpdates
	// TODO replace the edit view with a browse view, overlay "saving..."
}

/* ********************************** */

function buildViewLink(uid) {
	return $("<button onclick=\"show('???',"+uid+")\">"+uid+"</button>");
}

function clipUID(uid) {}
function clipSlug(slug) {}

function buildNodeView(nodeID) {
 return $("<div class=\"viewing node\" itemUID=\""+nodeID+"\">"
	+ "<div class=\"nodeInfo\">"
		+ "UID:&nbsp;<span class=\"uidClip\" field=\"uid\">...</span>"
		+ " Slug:&nbsp;<span class=\"slugClip\" field=\"slug\"></span>"
		+ "</div>"
	+ "<div class=\"labelView\"><h1 field=\"name\"></h1><p field=\"desc\"></p></div>"
	+ "<div class=\"nodeParents\"><h2>Parents</h2><div class=\"uidClips\" field=\"parents\"></div></div>"
	+ "<div class=\"nodeChildren\"><h2>Children</h2><div class=\"uidClips\" field=\"children\"></div></div>"
	+ "<div class=\"nodeFields\"><h2>Fields</h2><div field=\"fields\"></div></div>"
	+ "<div class=\"nodeRelations\"><h2>Relations</h2><div field=\"relations\"></div></div>"
	+ "</div>");
}

function buildFieldView(fieldID) {
 return $("<div class=\"viewing field\" itemUID=\""+fieldID+"\">"
	+ "<div class=\"fieldInfo\">"
		+ "UID:&nbsp;<span class=\"uidClip\" field=\"uid\">...</span>"
		+ " Slug:&nbsp;<span class=\"slugClip\" field=\"slug\"></span>"
		+ " Node:&nbsp;<span class=\"uidClip\" field=\"node\"></span>"
		+ "</div>"
	+ "<div class=\"labelView\"><h1 field=\"name\"></h1><p field=\"desc\"></p></div>"
	+ "<div class=\"fieldValue\"><h2>Value</h2><p field=\"val\"></p></div>"
	+ "</div>");
}

function buildRelationView(reltnID) {
 return $("<div class=\"viewing relation\" itemUID=\""+reltnID+"\">"
	+ "<div class=\"reltnInfo\">"
		+ "UID:&nbsp;<span class=\"uidClip\" field=\"uid\">...</span>"
		+ " Slug:&nbsp;<span class=\"slugClip\" field=\"slug\"></span>"
		+ " Node:&nbsp;<span class=\"uidClip\" field=\"node\"></span>"
		+ "</div>"
	+ "<div class=\"labelView\"><h1 field=\"name\"></h1><p field=\"desc\"></p></div>"
	+ "<div class=\"reltnValue\"><h2>Related</h2><div class=\"uidClips\" field=\"related\"></div></div>"
	+ "</div>");
}
